<template>
  <div class="page-content">

    <div class="comm-content" ref="box"></div>
  </div>
</template>
<script>
import "../../node_modules/echarts/theme/infographic"
export default {
  data() {
    return {
      // isshow:true,
      // yanse:"#fff"
      myEcharts: null
    }
  },
  computed:{
      themeStatus(){
            return this.$store.state.theme

        }
    },
    watch:{
        themeStatus(){
          console.log(this.$store.state.theme);
            this.myEcharts.dispose()
            this.initEcharts()
            this.getData()
            this.screen()
        }
    },
  mounted() {
     console.log(this.themeStatus);
     this.initEcharts()
     this.getData()
     window.addEventListener("resize",this.screen)
     this.screen()
  },
  destroyed(){
     window.removeEventListener('reset',this.screen)
  },
  methods: {
    //适配屏幕
    screen() {
      this.myEcharts.resize()
      //计算一个文字大小比例
      let width = this.$refs.box.offsetWidth
      let num = width / 100 * 5
      let options = {
        title: {
          textStyle: {
            //设置主题样式
            fontSize: num
          }
        }
      }
      //修改之后要重绘
      this.myEcharts.setOption(options)
    },
    //初始化图表
    initEcharts() {
      let box = this.$refs.box
      this.myEcharts = this.$echarts.init(box,this.themeStatus)
      let options = {
        title: {
          text: "各地区种植面积统计Top10",//标题内容
          top: 10,
          left: 10,
         

        },
        // 滑入显示详情
        tooltip: {

          // trigger: 'axis',
          axisPointer: {
            // type: 'cross',
            crossStyle: {
              color: '#999'
            },
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        xAxis:{
          show:true,
          type:"value",
          axisLine:{
            show:true
          }
        },
        yAxis:{
          show:true,
          type:'category'
        },
        series: [
          {
            grid: true,
            type: "bar",
            // 设置柱状图颜色
            color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "#33B3D9"
              },
              {
                offset: 1,
                color: "#11385D"
              }
            ]),
            // 显示柱状图顶上的数值
            label: {//定义显示数据
              normal: {
                show: true,
                position: 'right',//在柱状图的什么位置显示
                textStyle: {
                  color: '#fff'
                }
              }
            }
          }
        ]


      }
      //绘制图表
      this.myEcharts.setOption(options)
    },
    //请求数据
    async getData() {
      let dataList = await this.$http("/plantingAreaTop")

      dataList.data.sort(function (a, b) {
        return a.area - b.area
      })
      let dataClass = dataList.data.map(item => {
        return item.name
      })
      let dataArea = dataList.data.map(item => {
        return item.area
      })
      this.setEcharts(dataClass,dataArea)
      // console.log(dataList, dataClass, dataArea);
    },
    //绘制图表
    setEcharts(dataClass, dataArea) {
      let options = {
        yAxis: {
          data: dataClass
        },
        series:[
          {
            data:dataArea
          }
        ]
       
      }
      this.myEcharts.setOption(options)
    }
  }
 

}
</script>
<style scoped>
.aaaa {
  color: #fff;
}
</style>